<template>
    <div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item  v-for="data in loopList" :key="data.id">
                <img :src="data.img" :alt="data.title" :title="data.title" style="width:100%;height:100%">
            </van-swipe-item>
            
        </van-swipe>
        <nav>
            <router-link custom to="/films/nowplaying" v-slot="{ isActive, navigate }">
                <span :class="isActive ? 'red' : ''" @click="navigate">正在热映</span>
            </router-link>
            <router-link custom to="/films/comingsoon" v-slot="{ isActive, navigate }">
                <span :class="isActive ? 'red' : ''" @click="navigate">即将上映</span>
            </router-link>
        </nav>
        <router-view></router-view>
    </div>
</template>

<script setup>
import { Swipe as vanSwipe, SwipeItem  as vanSwipeItem} from 'vant';
import { ref } from 'vue';
const loopList = ref([
    {
        id: 1,
        title: '第二十条',
        img: 'https://img.ycnews.cn/a/10001/202402/81a0539f0776994d2b762110c1116db8.jpeg'
    },
    {
        id: 2,
        title: '飞驰人生2',
        img: 'https://x0.ifengimg.com/ucms/2024_04/982DA32A9D90F3333FA17F359575792D6119947B_size2265_w2500_h1684.jpg'
    },
    {
        id: 3,
        title: '熊出没·逆转时空',
        img: 'https://q9.itc.cn/q_70/images03/20240204/9c5674a360ef4fc19169b52898f6b87f.jpeg'
    },
    {
        id: 4,
        title: '周处除三害',
        img: 'https://k.sinaimg.cn/n/sinakd20231006ac/200/w640h360/20231006/07e6-166a6af647e6a9930f32b80e14ecbf5e.jpg/w700d1q75cms.jpg'
    },
    {
        id: 5,
        title: '蜘蛛夫人:超感觉醒',
        img: 'https://q4.itc.cn/images01/20240129/1819235f46bd428c99b592b6747b837a.jpeg'
    }
])

</script>

<style scoped lang="scss">
:deep(.van-cell){
    padding: 0;
}
:deep(.van-cell__value){
    text-align: left;
}


.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

nav {
    display: flex;
    justify-content: space-around;
    height: 40px;
    line-height: 40px;
    align-items: center;
    border-bottom: 1px solid #EDEDED;
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    a {
        text-decoration: none;
        color: #000;
        flex: 1;
        text-align: center;
        border-bottom: 2px solid transparent;
    }

    .red {
        border-bottom: 2px solid red;
    }
}
</style>